<template>
  <div id="ratings">
    <div class="score">
      <span class="seller_score">{{seller.score}}</span>
      <div class="seller_score_pic">
        <p>商家评分</p>
        <el-rate
          v-model="value"
          disabled
          text-color="#ff9900"
          score-template="{value}">
        </el-rate>
      </div>
      <div class="seller_serviceScore">
        <p>服务</p>
        {{seller.serviceScore}}
      </div>
      <div class="seller_foodScore">
        <p>口味</p>
        {{seller.foodScore}}
      </div>
    </div>
    <ul>
      <li v-for="item in ratings" v-bind:key="item.id">
        {{item.score}}
      </li>
    </ul>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'Ratings',
  data () {
    return {
      value: 4.6
    }
  },
  computed: {
    ...mapGetters(['ratings', 'seller'])
  },
  methods: {
    ...mapActions(['getRatings', 'getSeller'])
  },
  created () {
    // eslint-disable-next-line no-unused-vars
    var getRatings = this.getRatings()
  }
}
</script>

<style scoped lang="less">
#ratings{
  .score{
    width: 100%;
    height: 80px;
    background-color: white;
    margin-top: 55px;
    padding-left: 10px;
    padding-top: 10px;
    .seller_score{
      font-size: 26px;
      font-weight: bolder;
      color: red;
    }
    .seller_score_pic{
      display: inline-block;
      .el-rate{
        display: inline;
        margin-left: 10px;
      }
      p{
        font-size: 12px;
        font-weight: 400;
        margin-left: 10px;
      }
    }
    .seller_serviceScore{
      display: inline-block;
    }
    .seller_foodScore{
      display: inline-block;
    }
  }
}
</style>
